$(() => {
    const layer = layui.layer;
    const form = layui.form;

    const editId = sessionStorage.getItem('editId');

    let $image = null;
    let options = null

    let currentData = {};    // 获取当前数据
    EditData();

    // TinyMCE插件初始化
    initEditor();
    // 载入文章类别
    initCate();
    // 初始化裁剪区域
    initCropper();
    // 选择封面
    cover();

    // 填充数据
    fillData(currentData);

    // 初始载入文章类别(函数)
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                const htmlStr = template('tpl-cate', res);
                $("[name=cate_id]").html(htmlStr);
                form.render('select');
            }
        });
    }

    // 显示裁剪效果
    function initCropper() {
        $image = $('#image');   //初始化图片
        options = {
            aspectRatio: 400 / 280,
            preview: '.img-preview'
        }
        $image
            .cropper(options);    // 初始化裁剪区域
    }

    // 选择封面
    function cover() {
        $('#btnChooseImage').click(() => {
            $('#coverFile').click();
        });

        $('#coverFile').on('change', function (e) {
            // 拿到用户选择文件
            const file = e.target.files[0];
            // 创建地址字符串
            const newImgURL = URL.createObjectURL(file);
            $image
                .cropper('destroy') // 摧毁旧区域
                .attr('src', newImgURL)  //换新地址
                .cropper(options);      //初始化(添加参数)
        });
    }

    function EditData() {
        $.ajax({
            method: 'GET',
            url: '/my/article/' + editId,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message);
                }
                // 深度复制数据
                currentData.title = res.data.title;
                currentData.content = res.data.content;
                currentData.cover_img = res.data.cover_img;
                currentData.pub_date = res.data.pub_date;
                return layer.msg(res.message);

            }
        });

    }

    function fillData(data) {
        const i = $('#image').prop('src');
    }


});